<template>
  <div class="cinema">
    <div class="top">
      <div class="topup">
        <router-link to="/city"><span ref="info" ></span><i class="iconfont icon-tubiao-"></i></router-link>
        <div>影院</div>
        <div><i class="iconfont icon-chazhao"></i></div>
      </div>
      <div class="topdown">
        <div @click="show">全城
          <ul v-show="flag" class="district">
            <li v-for="(place,index) in dName" :key="index">{{place}}</li></ul>
        </div>
        <div>APP订票</div>
        <div>最近去过</div>
      </div>
    </div>
    <div class="list" :class="{'listbg':this.flag}">
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <router-link :to="'/cinemadetail/'+item.cinemaId" class="cont">
              <div>
                <span>{{item.name}}</span>
                <span>{{item.address}}</span>
              </div>
              <div>
                <span>￥{{(item.lowPrice)/100}}起</span>
                <span>距离未知</span>
              </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import { getCinema } from '../../api'
import {location} from '@/module/getLocation.js'
export default {
  data(){
    return {
      list:[],
      cid:'',
      flag:false,
      districtName:[],
      dName:[]
    }
  },
  created(){
    this.cid= this.$cookie.getCookie('cityID')
    getCinema(this.cid).then((res)=>{
      this.list = res.data.data.cinemas
      console.log(this.list)
      for (let i in this.list){
          this.districtName.push(this.list[i].districtName)
      }
      this.dName=Array.from(new Set(this.districtName))
      console.log(this.dName)
      this.$refs.info.innerHTML = this.$cookie.getCookie('cityNAME')
    })
    
  },
  methods:{
    go(id){
      this.$router.push('/cinemadetail/'+id)
    },
    show(){
      this.flag = !this.flag
    },
  }
}
</script>

<style>
 .cinema{
   flex:1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
  .cinema .top{
    width:100%;
    height:2rem;
    position: fixed;
    top:0;
    background:white;
  }
.cinema .top .topup{
  height:45%;
  border-bottom:0.01rem solid rgb(214, 214, 214);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cinema .top .topup div:nth-child(2){
  font-size:0.4rem;
}
.cinema .top .topdown{
  height:60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.cinema .top .topdown ul{
  width:100%;
  position: absolute;
  left:0;
  top:1.3rem;
  background: white;
  z-index: 10;
  border:1px solid;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.cinema .top .topdown ul li{
  margin:0 0.2rem;
}

.cinema .list{
  flex:1;
  margin-top:2.1rem;
  overflow: auto;
  padding: 0.2rem;
}
.cinema .list ul li{
  height:1.5rem;
  border-top: 0.01rem solid rgb(230, 230, 230);
}
.cinema .list .cont{
  height:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:gray;
  font-size:0.2rem;
}
.cinema .list .cont div{
  display: flex;
  flex-direction: column;
}
.cinema .list .cont div:nth-child(1){
  width:60%;
}
.cinema .list .cont div:nth-child(1) span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cinema .list .cont div:nth-child(1) span:nth-child(1){
  color:black;
  font-size:0.33rem;
  margin-bottom: 0.15rem;
}
.cinema .list .cont div:nth-child(2) span:nth-child(1){
  color:orangered;
  font-size:0.3rem;
  margin-bottom: 0.15rem;
}
.listbg{
  opacity:0.2;
}
</style>